<template>
  <div>
    <Card>
      <div class="search-con search-con-top">
        <Input clearable placeholder="用户名" class="search-input" v-model="searchData.userName" style="width:150px;"/>
        <Input clearable placeholder="消费单号" class="search-input" v-model="searchData.consumption" style="width:150px;"/>
        <Input clearable placeholder="电话" class="search-input" v-model="searchData.phone" style="width:150px;"/>
        <!-- <Select v-model="searchData.allstyle" class="search-col" placeholder="全部类型" style="width:150px;">
            <Option v-for="item in allstyle" v-if="item.key !== 'handle'" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
        </Select> -->
        <DatePicker v-model="searchData.daterange" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择时间区间" style="width: 200px"></DatePicker>
        <Button @click="handleSearch" class="search-btn" type="primary"><Icon type="search"/>&nbsp;&nbsp;查询</Button>
        <Button @click="handleexport" :loading="exportLoading" class="search-btn" type="primary"><Icon type="search"/>&nbsp;&nbsp;导出</Button>
      </div>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" @on-delete="handleDelete"/>
      <Page :total="totalSize" :page-size="searchData.pagesize" show-sizer style="text-align:right;padding-top:10px;" @on-page-size-change="changePagesize" @on-change="changePage"/>
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import excel from '@/libs/excel'
import { getAuthkey } from '@/libs/util'
import { getConsumptionFlow } from '@/api/data'
export default {
  name: 'consumptionflow',
  components: {
    Tables
  },
  data () {
    return {
      exportLoading: false,
      
      allstyle:[],
      totalSize: 0,
      searchData:{
          daterange: ['2018-01-15', '2018-12-12'],
          userName: '',
          consumption: '',
          phone: '',
          consumptionbank: '',
          allstyle: '',
          pagesize: 10,
          currenpage:1
      },
      columns: [
        {title: '订单号', key: 'p_no', sortable: true},
        {title: '真实姓名', key: 'u_name', editable: false},
        {
            title: '消费金额', 
            key: 'money',
            render: (h, params) => {
                return h('div', [
                    h('span', '¥' + params.row.money)
                ])
            }
        },
        {
            title: '电话', 
            key: 'tel',
            render: (h,params) => {
                let tmdata = '';
                if(params.row.tel){
                   tmdata = params.row.tel.substring(0,3)+'******'+params.row.tel.substring(params.row.tel.length-3)
                }
                return h('div',[
                    h('span',tmdata)
                ])
            }
        },
        {
            title: '信用卡号', 
            key: 'bank_no',
            render: (h,params) => {
                let tmdata = '';
                if(params.row.bank_no){
                   tmdata = params.row.bank_no.substring(0,4)+'******'+params.row.bank_no.substring(params.row.bank_no.length-4)
                }
                return h('div',[
                    h('span',tmdata)
                ])
            }
        },
        {title: '消费银行', key: 'bank_name'},
        {
            title: '手续费', 
            key: 'server',
            render:(h,params) => {
                return h('div',[
                    h('span', '¥' + params.row.server)
                ])
            }
        },
        {
            title: '费率', 
            key: 'rate',
            render:(h,params) => {
                return h('div',[
                    h('span', params.row.rate + '%')
                ])
            }
        },
        {
            title: '到账储蓄卡',
            key: 'card_no',
            render: (h,params) => {
                let tmdata = '';
                if(params.row.card_no){
                   tmdata = params.row.card_no.substring(0,4)+'******'+params.row.card_no.substring(params.row.card_no.length-4)
                }
                return h('div',[
                    h('span',tmdata)
                ])
            }
        },
        {
            title: '备注', 
            key: 'remark'
        },
        {
            title: '创建时间', 
            key: 'create_time',
            width: 150
        },
        {
            title: '状态', 
            key: 'status',
            render:(h,params) => {
                let status = '';
                if (parseInt(params.row.status) >= 80 && parseInt(params.row.status) <= 90){
                    status = '成功'
                }else if (parseInt(params.row.status) > 90 && parseInt(params.row.status) <= 100){
                    status = '异常失败'
                }else if (parseInt(params.row.status) >= 40 && parseInt(params.row.status) <= 50){
                    status = '支付失败'
                } else {
                    status = '受理中'
                }
                let color = '';
                if(status==='成功'){
                    color = '#1BBC9D'
                }else if(status === '受理中'){
                    color = '#4b9bf0'
                }else {
                    color = '#D0672C'
                }
                return h('div',[
                    h('span', {
                        style:{
                            color: color
                        }
                    }, status)
                ])
            }
        },
        {
          title: '操作',
          key: 'handle',
          width: 100,
          button: [
            (h, params, vm) => {
              return h('div', {
                style: {
                    marginTop: '5px',
                    marginBottom: '5px'
                },
                on: {
                  'click': () => {
                     this.$router.push(`orderinfo/${params.row.pid}`);
                  }
                }
              }, [
                h('Button', '详情')
              ])
            }
          ]
        }
      ],
      tableData: []
    }
  },
  methods: {
    handleDelete (params) {
      
    },
    handleSearch (){
        let data = {
            auth_key: getAuthkey(),
            type: 0,
            page: this.searchData.currenpage,
            limit: this.searchData.pagesize,
            u_name: this.searchData.userName,
            p_no: this.searchData.consumption,
            tel: this.searchData.phone,
            st_time: this.searchData.daterange[0],
            et_time: this.searchData.daterange[1]
        }
        getConsumptionFlow(data).then(res => {
            if(res.data.code !== 200){
                this.$Message.error(res.data.error)
                return
            }
            this.totalSize = res.data.data.dataCount
            this.tableData = res.data.data.list;
        },err => {
            this.$Message.error(err?err: '获取订单列表失败');
        })
    },
    changePagesize (size){
        this.$set(this.searchData, 'pagesize', size);
        this.handleSearch()
    },
    changePage (page){
        this.$set(this.searchData, 'currenpage', page);
        this.handleSearch()
    },
    handleexport (){
        //导出时记得请求api并且api返回所有数据
        const titlelist = [];
        Object.values(this.columns).forEach(element => {
            titlelist.push(element.title);
        });

        let data = {
            auth_key: getAuthkey(),
            type: 0,
            limit:0
        }

        getConsumptionFlow(data).then(res => {
            if(res.data.code !== 200){
                this.$Message.error(res.data.error)
                return
            }
            if (res.data.data.list.length) {
                this.exportLoading = true
                this.formatData(res);
                const params = {
                    title: titlelist,
                    key: ['p_no', 'u_name', 'money','tel', 'bank_no', 'bank_name', 'server','rate', 'card_no', 'remark', 'create_time', 'status'],
                    data: res.data.data.list,
                    autoWidth: true,
                    filename: '还款流水'
                }
                excel.export_array_to_excel(params)
                this.exportLoading = false
            } else {
                this.$Message.info('表格数据不能为空！')
            }
        },err => {
            this.$Message.error(err?err: '获取订单列表失败');
        })
    },
    formatData(res) {
        for(let i = 0;i < res.data.data.list.length; i++){
            let status = '';
            let statuscode = parseInt(res.data.data.list[i].status)
            if (statuscode >= 80 && statuscode <= 90){
                status = '成功'
            }
            if (statuscode > 90 && statuscode <= 100){
                status = '异常失败'
            }
            if (statuscode >= 40 && statuscode <= 50){
                status = '支付失败'
            } else {
                status = '受理中'
            }
            res.data.data.list[i].status = status
            res.data.data.list[i].rate = res.data.data.list[i].rate + '%'
            res.data.data.list[i].server = '¥' + res.data.data.list[i].server
        }
        return res;
    }
  },
  mounted () {
    this.handleSearch()
  }
}
</script>

<style>
    .search-input{
        width: 150px;
    }
</style>
